<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一次</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div {
            height: 100px;
            width:500px;
            margin: auto;
        }

        h1 {
            font-size: 90px;
            text-align: center;
            color: crimson;
        }

        form {
            margin: auto;
        }

        input {
            margin: auto;
        }

        table {
            margin: auto;
            border: 10px solid slateblue;

        }

        td {
            width: 50px;
            height: 50px;
            color: black;
        }

        img {
            width: 400px;
            margin-right: 200px;
        }


        a{
            font-size: 18px;
        }
    </style>
</head>
<!--
       <h1>-<h6>:标题,标题的特点是独占一行,标题的字号递减
       <center>:该标签已经不再建议使用了(没学习css前临时使用),作用是将其包含的组件在页面上居中显示
       <input>:输入组件,该组件用于在页面上获取用户输入
               组件可以体现为不同的样子,有属性type决定.
               常用值:
               type="text" : 文本框
               type="password" : 密码框
               type="checkbox" : 复选框
               type="radio" : 单选框
               type="button" : 按钮
               type="submit" : 表单提交按钮
               ...

        <a>:超链接,标签之间的文本为超链接上提示信息,而属性href用于指定点击超链接后跳转的地址.

        <br>:换行

        <table>标签:表格。属性border用于指定边框。
                   <table>标签中包含<tr>标签用于表示行
                   <tr>标签中包含<td>标签用于表示列
                   <td>标签中常见属性:
                   align:对其方式。left左对齐,right右对齐,center剧中对其
                   colspan:跨列合并列，合并是从左向右合并列
                   rowspan:跨行合并列，合并是从上向下合并列

        <img>标签:图片。属性src用于指定图片的路径

        在HTML页面中我们经常会通过指定一个路径去引入服务器的一个资源，在指定路径时，我们通常是以"/"作为开始
        而这里的"/"可以理解为定义的就是服务器中static目录的位置。
        本质上它表达的是地址栏中抽象路径中最开始的“/”位置。
                             v
        http://localhost:8088/index.html
        例如:在index.html页面上引入一张图片:
        <img src="/logo.png">
        此时浏览器理解该路径实际位置时对应的就是:
        http://localhost:8088/logo.png

   -->
<body>

<h1>钓鱼网站</h1>
<div>
    <form action="index.html">
        <input type="text" size="50">
        <input type="button" value="不要点我" onclick="alert('甜宝儿真棒！！！')">
    </form>
    <a href="https://pic.sogou.com/pics?st=255&from=vr&query=jk%E6%B2%A1%E6%9C%89%E7%A9%BF%E5%AE%89%E5%85%A8%E8%A3%A4%E7%85%A7%E7%89%87&rawQuery=jk%E6%B2%A1%E6%9C%89%E7%A9%BF%E5%AE%89%E5%85%A8%E8%A3%A4%E7%85%A7%E7%89%87"
    >周甜甜点这个</a>
    <span><a href="/classtable.html">这是课程表</a></span>
    <span><a href="/reg.html">注册页面</a></span>
    <span><a href="/login.html">登录页面</a></span><br>
    <span><a href="/userList">用户列表</a></span>
    <span><a href="/writeArticle.html">发表文章</a></span>
    <span><a href="/articleList">文章列表</a></span>
    <span><a href="/qr.html">二维码生成器</a></span>
</div>
<!--<table border="1px">
    <tr>
        <td colspan="2">111</td>
        <td>222</td>
        <td rowspan="2">333</td>

    </tr>
    <tr>
        <td>666</td>
        <td>777</td>
        <td>888</td>
    </tr>
</table>-->
<img src="/mm.jpg">
<img src="/mm1.jpg">
<img src="/mm2.jpg">
</body>
</html>